<%@ include file="/WEB-INF/views/public/include.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<!-- 页面编码 -->
	<meta charset="utf-8">
  	<!-- 手机浏览器禁止缩放, 页面大小默认为手机屏幕宽度 -->
  	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  	<!-- 允许IOS全屏显示网页 -->
  	<meta content="yes" name="apple-mobile-web-app-capable" />
  	<!-- 设置IOS状态栏为透明底色 -->
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
	<!-- 设置360浏览器渲染引擎为webkit -->
  	<meta name="renderer" content="webkit">
  	<!-- 设置APP标题 -->
  	<meta name="apple-mobile-web-app-title" content="青年电影志">
  	<!-- 关闭自动识别电话号码 -->
  	<meta name="format-detection" content="telephone=no">
	<!-- iPhone桌面图标 -->
	<link href="/resources/static/images/app-60@2x.png" sizes="120x120" rel="apple-touch-icon-precomposed">
  	<!-- 页面标题 -->
  	<title>青年电影志</title>
	<!-- 页面摘要描述 -->
  	<meta name="description" content="约吗">
  	<!-- 页面关键词 -->
  	<meta name="keywords" content="约大牛">

  	<!-- 基本样式载入 -->
  	<link rel="stylesheet" href="/resources/static/css/ionicons.min.css">
	<link rel="stylesheet" href="/resources/static/css/public.css">
	<!-- 基本脚本载入 -->
	<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
	<script src="/resources/static/js/plugins.min.js"></script>
	<script src="/resources/static/js/vendors/background-blur.min.js"></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
</head>
<body>
	<div id="app" class="site" data-controller="yuejianPage">
		<div class="select-plan">
			<h4>请选择你要预约的话题</h4>
			<form action="/main/application/make" name="selectPlan_form" id="selectPlan_form">
				<c:if test="${subjects != null && subjects.size() > 0}">
					<input type="hidden" name="subjectId" id="selected_plan" value="${subjects.get(0).id}">
				</c:if>
				<c:forEach var="subject" items="${subjects}">
					<a href="#" class="plan-item is-active js-select-plan" data-plan="${subject.id}">
						<div class="plan-item-title">${subject.title}</div>
						<div class="plan-item-meta">
							<p>${subject.price} 元/次</p>
							<p>${subject.getDurationString()}</p>
						</div>
					</a>
				</c:forEach>
				<a role="button" class="plan-submit js-plan-submit">确认</a>
			</form>
			<a role="button" class="plan-hide js-close"></a>
		</div>
		<!-- END .select-plan -->
		<div class="bar bar-footer bar-primary">
			<a role="button" class="nav-btn js-plan-show"><i class="ion-chatbubbles"></i>立即约见</a>
		</div>
		<div id="content" class="site-content">
			<div class="inner">
				<article class="single-post">
					<c:choose>
						<c:when test="${user.img != null && user.img != ''}">
							<header class="entry-header" style="background-image: url(${user.img});">
							<div class="head-bg-wrap"></div>
							<script>
								(function($) {
									// 虚化背景
									$('.head-bg-wrap').backgroundBlur({
										imageURL : "${user.img}",
										blurAmount : 10,
										imageClass : 'head-bg'
									});
								})(jQuery);
							</script>
						</c:when>
						<c:otherwise>
							<header class="entry-header" style="background-image: url(/resources/static/assets/single-head.jpg);">
							<div class="head-bg-wrap"></div>
							<script>
								(function($) {
									// 虚化背景
									$('.head-bg-wrap').backgroundBlur({
										imageURL : 'http://yuejian.youthfilmic.com/resources/static/assets/single-head.jpg',
										blurAmount : 10,
										imageClass : 'head-bg'
									});
								})(jQuery);
							</script>
						</c:otherwise>
					</c:choose>
						<div class="entry-avatar-wrap">
							<div class="entry-avatar">
								<img src="${user.picUrl}" alt="">
							</div>
						</div>
						<h1 class="entry-name">${user.getName()}</h1>
						<div class="entry-post-wrap">
							<div class="entry-post">${user.company}|${user.profession}</div>
						</div>
						<a href="/main/discovery" class="back-btn"><i class="ion-chevron-left"></i></a>
						<!-- <span class="loveit js-loveit"><i class="ion-ios-heart"></i></span> -->
					</header>
					<!-- END .entry-header -->
					<div class="entry-address">${user.getCityString()}</div>
					<div class="entry-meta">
						<span><i class="ion-coffee"></i>${user.metCount}人见过</span>
						<span><i class="ion-heart"></i>${user.commentCount}人评论</span>
					</div>
					<c:forEach var="subject" items="${subjects}">
						<div class="fund-plan-card state-retian-border js-touch">
							<header class="entry-header">
								<span class="plan-money">¥ ${subject.price} 元/次</span>
								<div class="plan-rating">
									<c:forEach var="i" begin="1" end="${subject.evaluation}">
										<i class="ion-android-star"></i>
									</c:forEach>
									<c:forEach var="i" begin="1" end="${5 - subject.evaluation}">
										<i class="ion-android-star-outline"></i>
									</c:forEach>
								</div>
							</header>
							<!-- END .entry-header -->
							<div class="entry-excerpt">
								<h1>${subject.title}</h1>
								${subject.content}
							</div>
							<!-- END .entry-excerpt -->
							<footer class="entry-footer">
								<span class="fund-time"><i class="ion-android-time"></i>${subject.getDurationString()}</span>
								<span class="fund-cat">${subject.getTypeString()}</span>
							</footer>
							<!-- END .entry-footer -->
							<a href="/main/subject/${subject.id}" class="overlay-link"></a>
						</div>
					</c:forEach>
					<!-- END .fund-plan-card -->

					<!-- END .fund-plan-card -->
					<div class="about-people">
						<h3 class="about-title">关于${user.getName()}</h3>
						<div class="about-avatar">
							<c:choose>
								<c:when test="${user.img != null && user.img != ''}">
									<img src="${user.img}" alt="">
								</c:when>
								<c:otherwise>
									<img src="${user.picUrl}" alt="">
								</c:otherwise>
							</c:choose>
						</div>
						<p>
							${user.instruction}
						</p>
					</div>

					<!-- END .about-people -->
					<!-- 没有评论就不显示 -->
					<c:if test="${comments != null && comments.size() > 0}">
						<div class="review-comment">
							<h4 class="review-title">评价</h4>
							<c:forEach var="comment" items="${comments}">
								<div class="review-comment">
									<div class="review-content">
											${comment.content}
									</div>
									<!-- END .review-content -->
									<a href="#" class="review-party">参与话题：${comment.subject.title}</a>
									<hr>
									<div class="review-user-wrap">
										<div class="review-user">
											<div class="review-user-avatar">
												<img src="${comment.user.picUrl}">
											</div>
											<!-- END .review-user-avatar -->
											<div class="review-user-info">
												<b class="user-name">${comment.user.getName()}</b>
												<time class="review-date"><fmt:formatDate value="${comment.postAt}" type="both"></fmt:formatDate></time>
											</div>
										</div>
										<!-- END .review-user -->
									</div>
									<!-- END .review-user-wrap -->
								</div>
							</c:forEach>
							<!-- END .read-more-wrap -->
						</div>
					</c:if>
				<!-- END .review-comment -->
				</article>
				<!-- END .single-post -->
				<section class="related-topic">
					<h3 class="related-title">相关话题</h3>
					<c:forEach var="subject" items="${relateubjects}">
						<article class="people-view js-touch">
							<div class="people-avatar">
								<img src="${subject.user.picUrl}" alt="">
								<span class="people-name">${subject.user.getName()}</span>
							</div>
							<!-- END .people-avatar -->
							<div class="people-content">
								<h3 class="people-title">${subject.title}</h3>
								<span class="people-pos">${subject.user.company}|${subject.user.profession}</span>
								<div class="people-meta">
									<c:if test="${subject.metCount != 0}">
										<span class="people-review">${subject.metCount}人见过</span>
									</c:if>
									<c:if test="${subject.commentCount != 0}">
										<span class="people-comments">${subject.commentCount}人评价</span>
									</c:if>
								</div>
								<!-- END .people-meta -->
							</div>
							<!-- END .people-content -->
							<a href="/main/subject/user/${subject.userId}" class="overlay-link"></a>
						</article>
					</c:forEach>

					<!-- END .people-view -->
				</section>
				<!-- END .related-topic -->
			</div>
			<!-- END .inner -->
		</div>
		<!-- END #content -->
	</div>
	<!-- END #page -->
	<!-- 页面脚本载入 -->
	<script src="/resources/static/js/app.js"></script>
	<script>
		wx.ready(function() {
			// 分享到朋友圈
			wx.onMenuShareTimeline({
			    title: '「青年电影志」${subjects.get(0).title}', // 分享标题
			    link: location.href, // 分享链接
			    imgUrl: '${user.img}', // 分享图标
			    success: function () { 
			        // 用户确认分享后执行的回调函数
			    },
			    cancel: function () { 
			        // 用户取消分享后执行的回调函数
			    }
			});
			// 分享给朋友
			wx.onMenuShareAppMessage({
			    title: '「青年电影志」${subjects.get(0).title}', // 分享标题
			    desc: '${user.getName()} | ${user.company}·${user.profession} | ${user.getCityString()}', // 分享描述
			    link: location.href, // 分享链接
			    imgUrl: '${user.img}', // 分享图标
			    success: function () { 
			        // 用户确认分享后执行的回调函数
			    },
			    cancel: function () { 
			        // 用户取消分享后执行的回调函数
			    }
			});
			// 分享到QQ
			wx.onMenuShareQQ({
			    title: '「青年电影志」${subjects.get(0).title}', // 分享标题
			    desc: '${user.getName()} | ${user.company}·${user.profession} | ${user.getCityString()}', // 分享描述
			    link: location.href, // 分享链接
			    imgUrl: '${user.getName()} | ${user.img}', // 分享图标
			    success: function () { 
			       // 用户确认分享后执行的回调函数
			    },
			    cancel: function () { 
			       // 用户取消分享后执行的回调函数
			    }
			});
			// 分享到腾讯微博
			wx.onMenuShareWeibo({
			    title: '「青年电影志」${subjects.get(0).title}', // 分享标题
			    desc: '${user.getName()} | ${user.company}·${user.profession} | ${user.getCityString()}', // 分享描述
			    link: location.href, // 分享链接
			    imgUrl: '${user.img}', // 分享图标
			    success: function () { 
			       // 用户确认分享后执行的回调函数
			    },
			    cancel: function () { 
			        // 用户取消分享后执行的回调函数
			    }
			});
			// 分享到QQ空间
			wx.onMenuShareQZone({
			    title: '「青年电影志」${subjects.get(0).title}', // 分享标题
			    desc: '${user.getName()} | ${user.company}·${user.profession} | ${user.getCityString()}', // 分享描述
			    link: location.href, // 分享链接
			    imgUrl: '${user.img}', // 分享图标
			    success: function () { 
			       // 用户确认分享后执行的回调函数
			    },
			    cancel: function () { 
			        // 用户取消分享后执行的回调函数
			    }
			});
		});
	</script>
</body>
</html>